<template>
    <div class="Details">
      <el-row class="body">
        <el-col :span="16" class="left">
          <div class="left-top">
            <h4 class="title">{{detailInfo.content.title}}<span class="top" v-if="detailInfo.content.isTop">置顶</span><span class="essence" v-if="detailInfo.content.isEssence">精华</span></h4>
            <div class="text-desc">
              <span>作者：{{detailInfo.content.user}}</span><span>发布时间：{{detailInfo.content.date}}</span><span>阅读数：{{detailInfo.content.comment}}</span>
            </div>
            <div class="tags">
              <el-tag
                v-for="(tag,index) in detailInfo.content.tags"
                :key="index"
                type="success">
                {{tag}}
              </el-tag>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="left-main">
            <p v-for="(desc,index) in detailInfo.content.descs" :key="index">{{desc}}</p>
          </div>
          <el-divider></el-divider>
          <div class="left-reply">
            <h4>{{detailInfo.content.comments.length}}个回复</h4>
            <el-divider></el-divider>
            <div class="replies"  v-for="(comment,index) in detailInfo.content.comments" :key="index">
              <el-row class="reply">
                <el-col class="img" :offset="1" :span="1">
                  <el-image
                    :src="comment.avatar"
                    fit="fill"></el-image>
                </el-col>
                <el-col class="reply-mid"  :span="10">
                  <h4 class="user">{{comment.user}}</h4>
                  <div class="reply-content">
                    <p>{{comment.content}}</p>
                  </div>
                  <div class="menu" @click="showSubComment(index)">
                    <!--<i class="icon el-icon-star-off"></i>-->
                    <span :class="{'active':comment.subComments.length}">
                      <i class="icon el-icon-chat-dot-square"></i><span>{{comment.subComments.length}}</span>
                    </span>
                  </div>
                </el-col>
                <el-col class="reply-right" :span="3" :offset="2">
                  {{detailInfo.content.date}}
                </el-col>
              </el-row>
              <div class="subComment" v-if="comment.showSub">
                <el-row class="reply" v-for="(subComment,subIndex) in comment.subComments" :key="subIndex">
                  <el-col class="img" :offset="1" :span="1">
                    <el-image
                      :src="subComment.avatar"
                      fit="fill"></el-image>
                  </el-col>
                  <el-col class="reply-mid" :span="16">
                    <h4 class="user">{{subComment.user}}</h4>
                    <div class="reply-content">
                      <p>{{subComment.content}}</p>
                    </div>
                  </el-col>
                  <el-col class="reply-right" :span="4" :offset="1">
                    {{subComment.date}}
                  </el-col>
                </el-row>
                <div class="ourSubComment">
                  <el-input @input="handleSubComment" placeholder="评论一下..."></el-input>
                  <el-button type="primary" @click="subReply(comment.id,index)">评论</el-button>
                </div>
              </div>
              <el-divider></el-divider>
            </div>
          </div>
          <div class="left-commit">
            <h4>提交回复</h4>
            <el-divider></el-divider>
            <div class="commit">
              <div class="user">
                <el-image
                  :src="avatar"
                  fit="fill"></el-image>
                <div class="username">{{accountName}}</div>
              </div>
              <el-input type="textarea" v-model="ourComment"></el-input>
              <el-button type="success" @click="reply" style="margin-top: 10px;float: right;">回复</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="right">
          <div class="right-top">
            <h4>发布人</h4>
            <div class="user">
              <img :src="detailInfoTest.content.avatar"
                   alt="加载错误">
             <!-- <el-image :src="detailInfoTest.content.setting"
                        fit="fill"></el-image>-->
              <div class="username">{{detailInfo.content.user}}</div>
            </div>
            <el-divider></el-divider>
            <div class="right-mid">
              <h4>官方公众号</h4>
              <el-image class="img"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"></el-image>
            </div>
            <el-divider></el-divider>
            <div class="right-about">
              <h4>相关问题</h4>
              <div class="contents">
                <router-link tag="p" class="content"
                             :to="{name:'CommunityDetails', params: {id:aboutContent.id}}"
                             v-for="(aboutContent,index) in detailInfo.aboutContents" :key="index">
                  {{aboutContent.title}}
                  <span><i class="el-icon-chat-dot-square"></i>{{aboutContent.comment}}</span>
                </router-link>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <loading :show="loading" />
    </div>
</template>

<script>
  import {mapState} from 'vuex';
  import loading from "comp/common/Load/Load";
  import vue from 'vue'
  export default {
        name: "Details",
        computed:{
          ...mapState(["accountName","avatar","token"]),
        },
        watch:{
          '$route'(to,from){
            this.init();
          }
        },
        data() {
            return {
              loading:false,
              ourComment:'',
              ourSubComment:'',
              detailInfo:{
              },
              detailInfoTest:{
                content:{
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:true,
                  user:"啦啦啦",
                  date:"2017-09-01",
                  tag:"JVM",
                  comment:100,
                  tags:["java","js","python","shell","c/c++"],
                  descs:[
                    '啦啦啦',
                    '啦啦啦',
                    '啦啦啦',
                  ],
                  comments:[
                    {
                      id:1,
                      avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                      user:"啦啦啦",
                      date:"2017-09-01",
                      content:"lll",
                      showSub:false,
                      subComments:[
                        {
                          id:1,
                          avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                          user:"啦啦啦",
                          date:"2017-09-01",
                          content:"啦啦啦啦啦啦",
                        },
                        {
                          id:1,
                          avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                          user:"啦啦啦",
                          date:"2017-09-01",
                          content:"啦啦啦啦啦啦",
                        },
                        {
                          id:1,
                          avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                          user:"啦啦啦",
                          date:"2017-09-01",
                          content:"啦啦啦啦啦啦",
                        },
                      ]
                    },
                    {
                      id:2,
                      avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                      user:"啦啦啦",
                      date:"2017-09-01",
                      content:"lll",
                      showSub:false,
                      subComments:[
                        {
                          id:1,
                          avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                          user:"啦啦啦",
                          date:"2017-09-01",
                          content:"啦啦啦啦啦啦",
                        },
                        {
                          id:1,
                          avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                          user:"啦啦啦",
                          date:"2017-09-01",
                          content:"啦啦啦啦啦啦",
                        },
                        {
                          id:1,
                          avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                          user:"啦啦啦",
                          date:"2017-09-01",
                          content:"啦啦啦啦啦啦",
                        },
                      ]
                    }
                  ]
                },
                aboutContents:[
                  {title:"深入学习jvm1",comment:100},
                  {title:"深入学习jvm1",comment:100},
                  {title:"深入学习jvm1",comment:100},
                  {title:"深入学习jvm1",comment:100},
                ],
              }
            }
        },
        methods: {
          init(){
            let id=this.$route.params.id;
            this.loading = true;
            // this.detailInfo=this.detailInfoTest;
            this.$axios({
              url:`http://47.92.167.153:8085community/info/${id}`,
              method:'get',
            }).then((res)=>{
              res=res.data;
              if(res.success){
                res=res.data;
                this.detailInfo=res;
                this.detailInfo.content.comments.forEach(item=>{
                  item.showSub=true;
                });
              }
            }).catch(function(error){
              console.log(error)
            });
            setTimeout(() => {
              this.loading = false;
            }, 1000);
          },
          showSubComment(index){
            if(this.detailInfo.content.comments[index].subComments.length){
              this.detailInfo.content.comments[index].showSub=!this.detailInfo.content.comments[index].showSub;
            }
          },
          reply(){
            /*let reply={
              id:1,
              setting:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
              user:"啦啦啦",
              date:"2017-09-01",
              content:"吃饱了",
              subComments:[]
            };
            this.detailInfo.content.comments.push(reply);*/
            let reply={};
            this.$axios({
              url:'http://47.92.167.153:8085/community/comment',
              method:'post',
              data:{
                data:{
                  tag:0,//0表示一级评论，1表示二级评论
                  articleId:this.detailInfo.content.id,
                  commentId:null,
                  content:this.ourComment
                },
                token:this.token,
              }
            }).then((res)=>{
              res=res.data;
              if(res.success){
                this.detailInfo.content.comments.push(res.data);
              }
            }).catch(function(error){
              console.log(error)
            });
        },
        subReply(commentId,index){
          /*let reply={
            id:1,
            setting:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            user:"啦啦啦",
            date:"2017-09-01",
            content:"吃饱了",
          };*/
          this.$axios({
            url:'http://47.92.167.153:8085/community/comment',
            method:'post',
              data:{
                data:{
                  tag:1,//0表示一级评论，1表示二级评论
                  articleId:this.detailInfo.content.id,
                  commentId:commentId,
                  content:this.ourSubComment,
                },
                token:this.token
              }
            }).then((res)=>{
              res=res.data;
              if(res.success){
                this.detailInfo.content.comments[index].subComments.push(res.data);
              }
            }).catch(function(error){
              console.log(error)
            });
        },
          handleSubComment(val){
            this.ourSubComment=val;
          }
        },
        components:{
          loading
        },
        mounted() {
          this.init();
        }
    }
</script>

<style scoped lang="stylus">
.Details
  margin 70px auto 0;
  background #EFEFEF
  padding  30px 50px
  box-sizing border-box
  .body
    background #fff
    .left
      padding: 30px;
      .left-top
        box-sizing border-box
        .title
          font-size 18px
          >span
            color #fff
            font-size 14px
            display: inline-block;
            width: 32px;
            height: 17px;
            text-align: center;
            margin-left: 5px;
          .top
            background #333B4A
          .essence
            background #D60000
        .tags
          margin-top 15px
          >span
            margin-right 10px
        .text-desc
          font-weight: normal;
          color: #999;
          margin-top 9px
          >span
            margin-right 10px
            font-size: 12px;
      .left-main
        margin-left 20px
        height 400px
      .left-reply
        >h4
          font-size 20px
          margin 15px auto
        .replies
          position relative
          .reply
            height 90px
            .img
              .el-image
                margin-top 14px
                width: 38px;
                height: 38px;
                border-radius: 50%;
            .reply-mid
              box-sizing border-box
              padding-top: 25px;
              margin-left: 15px;
              .user
                margin-bottom 6px
              .menu
                color: #999;
                margin-top: 5px;
                >i
                  margin-right 2px
                  font-size 15px
                  cursor pointer
                >span
                  margin-right 2px
                  font-size 15px
                  cursor pointer
                  &.active
                    color: #499ef3;
            .reply-right
              position absolute
              bottom 12px
              right 10px
              font-size 13px
              color #999;
          .subComment
            margin-left 75px
            border-radius: 5px;
            margin-top: 10px;
            border: 1px solid #eee;
            .reply
              height 75px
              position relative
              border-bottom 1px solid #eee
              .img
                .el-image
                  margin-top 14px
                  width: 38px;
                  height: 38px;
                  border-radius: 50%;
              .reply-mid
                box-sizing border-box
                padding-top: 25px;
                margin-left: 15px;
                .user
                  margin-bottom 6px
              .reply-right
                position absolute
                bottom 12px
                right 10px
                font-size 13px
                color #999;
          .ourSubComment
            margin 15px 30px 10px
            height 70px
            .el-input__inner
              height 30px
            .el-button
              float right
              margin 8px auto
              line-height: 0.7
      .left-commit
        >h4
          font-size 20px
          margin 15px auto
        .commit
          .user
            position relative
            margin: 10px auto;
            .el-image
              width 50px
              height 50px
              border-radius: 50%;
            .username
              position: absolute;
              bottom: 19px;
              left: 60px;
              font-size: 16px;
    .right
      .right-top
        >h4
          font-size 20px
          margin 20px auto
        .user
          position relative
          >img
            width 50px
            height 50px
            border-radius: 50%;
          .username
            position: absolute;
            bottom: 19px;
            left: 60px;
            font-size: 16px;
        .img
          display: inline-block;
          max-width: 100%;
          padding: 4px;
          line-height: 1.42857143;
          background-color: #fff;
          border: 1px solid #ddd;
          border-radius: 4px;
          transition: all .2s ease-in-out;
          width 230px
          height: auto;
      .right-about
        >h4
          font-size 20px
          margin-bottom 15px
        .contents
          .content
            position relative
            box-sizing border-box
            padding 7.5px 10px
            cursor pointer
            >span
              font-size 12px
              color #999
              margin-left 3px
              >i
                font-size 12px
            .el-divider--horizontal
              position absolute;
              top: 12px;
              left: 0px;
</style>
